<template>
    <div>
        <div class="search">
            <div class="input">
                <i class="icon-search"></i>
                <input
                    confirm-type="search"
                    v-model="keyword"
                    placeholder="输入想订阅的品牌" placeholder-class="placeholder">
                <div class="clear" @click="keyword = ''">
                    <i v-if="keyword" class="icon-close fs24"></i>
                </div>
            </div>
        </div>
        <div class="title">已订阅</div>
        <div class="sub_list">
            <div class="sub_item" v-for="(item, index) in mySubList" :key="index" @click="editSub(item, 'del', index)">
                <p>{{item.industryName}}</p>
                <i v-if="item.id && item.id != 'video'" class="icon-minus-circular"></i>
            </div>
        </div>
        <div class="title">热门订阅</div>
        <div class="sub_list">
            <div class="sub_item" @click="editSub(item, 'add')" v-for="(item, index) in allSubList" :key="index">
                <p>{{item.industryName}}</p>
                <i class="icon-plus-circular"></i>
            </div>
        </div>
        <div class="btn" @click="submit">完成</div>
    </div>
</template>

<script>
import { getDynamicIndustrys, editUserIndustry } from '@/request/art'
export default {
    data() {
        return {
            keyword: '',
            mySubList: [],
            // userIndustrys: [],
            dynamicIndustys: []
        }
    },
    onLoad() {
        this.getList()
    },
    computed: {
        allSubList() {
            let allSubList =  this.dynamicIndustys.filter(item => !this.mySubList.some(i => i.id == item.id))
            if(this.keyword) {
                allSubList = allSubList.filter(i => i.industryName.indexOf(this.keyword) > -1)
            }
            return allSubList
        }
    },
    methods: {
        getList() {
            getDynamicIndustrys().then(res => {
                this.mySubList = [
                    {
                        industryName: '推荐',
                        id: '',
                    },
                    // {
                    //     industryName: '视频',
                    //     id: 'video',
                    // },
                    ...res.data.userIndustrys
                ]
                // this.userIndustrys = res.data.userIndustrys
                this.dynamicIndustys = res.data.dynamicIndustys
            })
        },
        editSub(item, type, index) {
            if(type == 'del' && item.id && item.id != 'video') {
                this.mySubList.splice(index, 1)
            } else if(type == 'add') {
                this.mySubList.push(item)
            }
        },
        submit() {
            let submitSubList = this.mySubList.filter(item => item.id && item.id != 'video')
            submitSubList = submitSubList.map(item => item.id)
            editUserIndustry({
                industryIds: submitSubList.join(',')
            }).then(async res => {
                this.$interact.toast(res.msg)
                if(this.$prePage()) await this.$prePage().getSubs();
                if(this.$prePage()) this.$prePage().onRefresh();
                setTimeout(() => {
                    this.$navigate.to('/pages/material')
                },500)
            })
        }
    }

}
</script>

<style lang="less" scoped>
.search{
    width: 100%;
    background: #fff;
    padding: 20rpx 25rpx;
    display: flex;
    flex-shrink: 0;
    position: sticky;
    top: 0;
    z-index: 100;
    .input{
        width: 100%;
        display: flex;
        background: #eee;
        border-radius: 10rpx;
        height: 80rpx;
        padding: 0 0 0 20rpx;
        align-items: center;
        i{
            color: #999;
        }
        input{
            flex: 1;
            height: 100%;
            padding-left: 20rpx;
            font-size: 30rpx;
        }
        .clear{
            width: 60rpx;
            height: 60rpx;
            .align(center);
        }
    }
}

.title{
    width: 100%;
    padding: 20rpx 25rpx;
    font-size: 42rpx;
    font-weight: bold;
    background: #fff;
}
.sub_list{
    background: #fff;
    padding: 25rpx 0 25rpx 25rpx;
    display: flex;
    flex-wrap: wrap;
    .sub_item{
        width: 225rpx;
        height: 90rpx;
        background: #f2f2f2;
        border-radius: 10rpx;
        margin-right: 15rpx;
        margin-bottom: 15rpx;
        padding: 0 15rpx;
        .align(v-center);
        p{
            flex: 1;
            font-size: 30rpx;
            color: #555;
        }
        i{
            font-size: 24rpx;
        }
        &:nth-child(3n) {
            margin-right: 0;
        }
    }
}
.btn{
    width: 100%;
    height: 100rpx;
    background: @mainColor;
    color: #fff;
    position: fixed;
    bottom: 0;
    left: 0;
    font-size: 36rpx;
    .align(center);
}
</style>